<template>
  <div class="goodsGuanIndex">
    <el-card class="box-card">
      <!-- one------------------------------------------------------- -->
      <div slot="header" class="clearfix header">
        <span>订单列表</span>
        <el-button type="primary" round>导出数据</el-button>
      </div>
      <!-- -------------------------------------------------------------- -->

      <!-- two 搜索框1-->
      <div class="search">
        <el-input
          placeholder="下单人"
          v-model="search"
          class="input-with-select"
        >
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>

        <!-- 搜索框2 -->
        <el-input
          placeholder="收货人"
          v-model="search"
          class="input-with-select"
        >
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>

        <!-- ----------------------------------------------------------- -->

        <!-- three----------日期 -->
        <el-date-picker
          v-model="data"
          type="daterange"
          range-separator="至"
          start-placeholder="下单开始日期"
          end-placeholder="下单结束日期"
        >
        </el-date-picker>
      </div>

      <!-- --------------------------------------------------- -->

      <!-- four--------------------------------------------- -->
      <el-table :data="tableData" style="width: 100%">
        <!-- 第一栏 -->
        <el-table-column prop="order_sn" label="订单号" width="180">
        </el-table-column>

        <!-- 第二栏 -->
        <el-table-column
          prop="add_time"
          label="下单时间"
          width="180"
        ></el-table-column>

        <!-- 第三栏 -->
        <el-table-column prop="username" label="下单人"></el-table-column>

        <!-- 第四栏 -->
        <el-table-column prop="consignee" label="收货人"></el-table-column>

        <!-- 第五栏 -->
        <el-table-column prop="order_amount" label="总额"> </el-table-column>

        <!-- 第六栏 -->
        <el-table-column prop="order_status" label="订单状态">
          <!-- <template slot-scope="item">
                        <el-tag v-bind:type="item.row.order_status | elTagTypeFilter">{{item.row.order_status | orderStatusFilter}}</el-tag>
              </template> -->
        </el-table-column>

        <!-- 第七栏 -->
        <el-table-column prop="pay_status" label="支付状态">
          <!-- <template slot-scope="item">
                        <el-tag v-bind:type="item.row.shipping_status | elTagTypeFilter">{{item.row.shipping_status | shippingStatusFilter}}</el-tag>
             </template> -->
        </el-table-column>

        <!-- 第八栏 -->
        <el-table-column prop="shipping_status" label="配送情况">
          <!-- <template slot-scope="item">
                        <el-tag v-bind:type="item.row.shipping_status | elTagTypeFilter">{{item.row.shipping_status | shippingStatusFilter}}</el-tag>
              </template> -->
        </el-table-column>

        <!-- 第九栏 -->
        <el-table-column label="操作" class="cell">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="editFn(scope.row)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="delFn(scope.row.no)"
            >
            </el-button>
          </template>
        </el-table-column>
        <!-- 最后一栏：里面包含两个按钮 使用插槽的方法  <template slot-scope="scope"></template>-->
      </el-table>
      <!----------------------------------------------------------------------  -->

      <!-- five----编辑弹框------------------------------------------------------------ -->
      <el-dialog
        title="编辑商品类型"
        :visible.sync="isShowEditTk"
        width="30%"
        :before-close="handleClose"
      >
        <!-- form -->
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="类型名称" prop="type_name">
            <el-input
              type="password"
              v-model="ruleForm.type_name"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <!-- /form -->
        <span>这是一段信息</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="isShowEditTk = false">取 消</el-button>
          <el-button type="primary" @click="sumbit">确 定</el-button>
        </span>
      </el-dialog>
      <!-- --------------------------------------------------------------------------------------- -->
    </el-card>
  </div>
</template>
<script>
import { getDingdanIndex, deleteDingdanIndex } from "@/api";
export default {
  data() {
    return {
      isShowEditTk: false,

      //搜索数据
      search: "",

      //日期
      data: [],

      //表单编辑数据
      ruleForm: {
        type_name: ""
      },
      rules: {
        //键 ruleForm里面的键
        //值 数组里面是一个个对象 赋值
        type_name: [
          { required: true, message: "请输入类型名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ]
      },

      tableData: []
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    //封装列表接口数据
    initData() {
      getDingdanIndex().then(res => {
        console.log(res);
        if (res.meta.state == 200) {
          this.tableData = res.data.list;
        }
      });
    },

    //编辑
    editFn(rrow) {
      //显示编辑弹框
      this.isShowEditTk = true;
      //将一整行的保存到一个变量中
      this.ruleForm = rrow;
    },
    //点击弹框的确定按钮去发送异步请求
    sumbit() {
      //无接口
    },

    //删除功能
    delFn(iid) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      });
      deleteDingdanIndex({
        order_id: iid
      })
        .then(res => {
          console.log(res); //打印出500错误
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    }
  }
};
</script>

<style lang="scss" scoped>
.goodsGuanIndex {
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  //搜索
  .search {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .input-with-select {
    width: 300px;
  }
  .el-table .cell {
    display: flex;
  }
}
</style>
